<!DOCTYPE html>
<html>
<base href="http://localhost:8080/classroom/">
<link type="text/css" rel="stylesheet" href="static/css/style.css" >
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
<head>
	<style type="text/css">
		li{
			display: inline-block;
		}
		ul{
			text-align: center;
		}
	</style>
<meta charset="UTF-8">
<title>课室管理系统</title>
</head>
<body>
<div id="msg"></div>

<div id="header">
	<img class="logo_img" alt="" src="static/img/logo.png" >
	<span class="wel_word">图书管理系统</span>
	<div>
<!--<%&#45;&#45;		<c:choose>&#45;&#45;%>-->
<!--<%&#45;&#45;			<c:when	test="${sessionScope.student != null}">&#45;&#45;%>-->
<!--<%&#45;&#45;				<span>欢迎<span class="um_span">${sessionScope.student.username}</span>光临图书管理系统</span>&#45;&#45;%>-->
<!--<%&#45;&#45;				<a href="orderServlet?action=myPage">我的预订</a>&#45;&#45;%>-->
<!--<%&#45;&#45;				<a href="studentServlet?action=logout">注销</a>&nbsp;&nbsp;&#45;&#45;%>-->
<!--<%&#45;&#45;			</c:when>&#45;&#45;%>-->
<!--<%&#45;&#45;			<c:when	test="${sessionScope.manager != null}">&#45;&#45;%>-->
<!--<%&#45;&#45;				<span>欢迎<span class="um_span">${sessionScope.manager.username}</span>光临图书管理系统</span>&#45;&#45;%>-->
<!--<%&#45;&#45;				<a href="pages/manager/manager.jsp">后台管理</a>&#45;&#45;%>-->
<!--<%&#45;&#45;				<a href="studentServlet?action=logout">注销</a>&nbsp;&nbsp;&#45;&#45;%>-->
<!--<%&#45;&#45;			</c:when>&#45;&#45;%>-->
<!--<%&#45;&#45;			<c:otherwise>&#45;&#45;%>-->
				<a href="pages/user/login.jsp">登录</a> |
				<a href="pages/user/regist.jsp">管理员登陆</a> &nbsp;&nbsp;
<!--<%&#45;&#45;			</c:otherwise>&#45;&#45;%>-->
<!--<%&#45;&#45;		</c:choose>&#45;&#45;%>-->
	</div>
</div>
	<div id="main">
		<div id="book">
			<div>
			<center>
				<input type="text" id="name" />
				<input type="button" id="btn1" value="搜索"/>
			</center>
			</div>
			<table id="mytable"></table>
			<ul class="paginate"></ul>
		</div>
	</div>
	<div id="bottom">
			<span>
				课室管理系统.Copyright &copy;2022
			</span>
	</div>
</body>
</html>

<script type="text/javascript" defer="true">
	$(function (){
		loadData(1,"http://localhost:8080/classroom/client/clientClassroomServlet?action=page&pageNo=1");
		$(document).on('click', '.paginate li:not([disabled])', function () {
			//confirm 判断点击的是确定还是页码
			if ($(this).hasClass('confirm')) {
				//是确定，要获取输入的是第几页。
				var page = parseInt($('.entrance').val());
				if (page <= 0 || page > parseInt($(this).data('total')/4)+1 || isNaN(page)) {
					alert('请输入正确的页码！');
				} else {
					//符合正确页数后调用ajax方法。
					loadData(page,"http://localhost:8080/classroom/client/clientClassroomServlet?action=page&pageNo="+page);
				}
			} else {
				//这里就是点击页码后的调用。
				var pageId = $(this).data('pageid');
				loadData(pageId,"http://localhost:8080/classroom/client/clientClassroomServlet?action=page&pageNo="+pageId);
			}
		});
	});

		//加载数据，这个函数作用：1、页面初始化渲染，2、点击分页时调用。现在你可以理解为页面初始化用的。
		// currentId 当前第几页
		function loadData(currentId,url) {
			$.ajax({
				url: url,
				type: "get",
				dataType: 'json',
				success: function (res) {
					var page = res.data;
					//paginateFactory函数是渲染页面的核心，稍后会做介绍。
					paginateFactory(page, currentId);
				}, error: function (res) {
					console.log(res);
				}
			})
		}

		function paginateFactory(page, currentId) {
			pageTotal = page.pageTotal;
			var thead = $('<thead></thead>');
			var tableRow = $('<tr></tr>');
			tableRow.append("<td>课室名称</td> <td>容量</td> <td>多媒体情况</td> <td>类型</td> <td>状态</td> <td>操作</td> ");
			thead.append(tableRow);

			var tbody = $('<tbody></tbody>')
			var classrooms = page.items;
			$(classrooms).each(function (index){
				var classroom = classrooms[index];
				var tr = $('<tr></tr>');
				var medium;
				if (classroom.medium == 0){
					medium = "无";
				}else {
					medium = "有";
				}
				var type;
				if (classroom.type == 0){
					type = "普通教室";
				}else {
					type = "阶梯教室";
				}
				var status;
				if (classroom.status == 0){
					status = "空闲中";
				} else if (classroom.status == 1){
					status = "已预订";
				} else {
					status = "使用中"
				}
				tr.append('<td>'+ classroom.name +'</td>'
						+'<td>'+ classroom.capacity +'</td>'
						+'<td>'+ medium +'</td>'
						+'<td>'+ type +'</td>'
						+'<td>'+ status +'</td>'
						+'<td>'+ '<a href="#">'+"预订"+'</a>' + '</td>');
				tbody.append(tr);
			});
			$("#mytable").html(thead.after(tbody));
			//disabled设置页码不能点击，如果当前页是第一页，«按钮不能点
			var pageHtml = "<li " + (page.pageNo > 1 ? "" : "disabled") + " data-pageid='" + page.pageNo + "'>«</li>";
			//pageTotal来设置分页显示数量，如果>=6的话，最多显示6条，否则你懂得
			var pageTotal = page.pageTotal;
			if (pageTotal > 6){
				pageTotal = 6;
			}
			//由于是两种样式，所以根据当前页来更改
			if (currentId < 6) {
				for (var j = 1; j <= pageTotal; j++) {
					pageHtml += "            <li " + (currentId === j ? "disabled" : "") + " data-pageid='" + j + "'>" + j + "</li>";
				}
			} else {
				//如果大于6，会加上...并且1、2页都在左侧留着
				for (var j = 1; j <= pageTotal; j++) {
					//小于3的话 1、2页码一直存在
					if (j < 3) {
						pageHtml += "            <li " + (currentId === j ? "disabled" : "") + " data-pageid='" + j + "'>" + j + "</li>";
					}
					//等于3，加上...
					if (j === 3) {
						pageHtml += "<li disabled class='jump'>...</li>";
					}
					//如果当前页大于三。页码需要根据当前页来渲染。
					if (currentId > 3) {
						//当前页-1，如果当前页是7，左边显示7-1=6
						if (j === 4) {
							if (currentId === page.pageTotal) {
								pageHtml += "<li data-pageid='" + (currentId - 2) + "'>" + (currentId - 2) + "</li>";
							}
							pageHtml += "<li data-pageid='" + (currentId - 1) + "'>" + (currentId - 1) + "</li>";
						}
						//当前页，注意disabled，不能在点击，
						if (j === 5) {
							pageHtml += "<li disabled data-pageid='" + currentId + "'>" + currentId + "</li>";
						}
						//这里当前页+1，你应该懂了。
						if (j === 6 && currentId < page.pageTotal) {
							pageHtml += "<li data-pageid='" + (currentId + 1) + "'>" + (currentId + 1) + "</li>";
						}
					}
					//这里如果当前页小于总页数的倒数第二页，...就显示。否则后面每页数了就不显示。
					if (j === 6 && currentId < (page.pageTotal - 1)) {
						pageHtml += "<li disabled class='jump'>...</li>";
					}
				}
			}
			//这里判断是不是最后一页，是就disabled
			pageHtml += "            <li " + (currentId >= page.pageTotal ? "disabled" : "") + " data-pageid='" + (currentId+1) + "'>»</li>";
			//这里就是页面直接跳转了。
			pageHtml += "&nbsp;&nbsp;&nbsp;&nbsp;<li class='jump' disabled>共" + page.pageTotal + "页, 到第<input class='entrance' value='" + currentId + "' type='text'>页</li >&nbsp;&nbsp;&nbsp;&nbsp;<li data-total='" + page.pageTotalCount + "' class='confirm'>提交</li>"
			//最后渲染
			$('.paginate').html(pageHtml);
		}


		$(".saveOrderBtn").click(function (){
			var name = $(this).parent().parent().find("td:first").text();
			return confirm("您是否要预订【"+ name +"】吗？");
		});

		$("#btn1").click(function (){
			var name = $("#name").val();
			loadData(1,"http://localhost:8080/classroom/client/clientClassroomServlet?action=getPageByName&pageNo=1&name="+name);
			$(document).on('click', '.paginate li:not([disabled])', function () {
				//confirm 判断点击的是确定还是页码
				if ($(this).hasClass('confirm')) {
					//是确定，要获取输入的是第几页。
					var page = parseInt($('.entrance').val());
					if (page <= 0 || page > parseInt($(this).data('total')/4)+1 || isNaN(page)) {
						alert('请输入正确的页码！');
					} else {
						//符合正确页数后调用ajax方法。
						loadData(page,"http://localhost:8080/classroom/client/clientClassroomServlet?action=getPageByName&pageNo=" + page + "&name=" + name);
					}
				} else {
					//这里就是点击页码后的调用。
					var pageId = $(this).data('pageid');
					loadData(pageId,"http://localhost:8080/classroom/client/clientClassroomServlet?action=getPageByName&pageNo="+ pageId + "&name=" + name);
				}
			});
		});

</script>
